<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div class="card">
        <div class="card-header">
          <h4>撮合交易总量</h4>
        </div>
        <div class="card-body">
          <div style="width: 700px; height: 300px">
            <div
              id="simplebar1"
              style="width: 550px; height: 300px"
            />
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div class="card">
        <div class="card-header">
          <h4>成交价情况</h4>
        </div>
        <div class="card-body">
          <div style="width: 700px; height: 300px">
            <div
              id="simplebar2"
              style="width: 550px; height: 300px"
            />
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { getReportData } from "@/api/link";
export default {
  data() {
    return {
      state: {
        //创建响应式数据对象和相关数据
        id: 1,
        data1: [],
        data2: [],
        data3: [],
        data4: [],
      },
    };
  },
  created() {},
  // DOM 渲染完成触发
  mounted() {
    getReportData().then((res) => {
      this.state.data1 = res.data.tradingVolumes;
      this.state.data2 = res.data.maxPrices;
      this.state.data3 = res.data.minPrices;
      this.state.data4 = res.data.averagePrices;
      this.drawChart();
    });
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart1 = this.$echarts.init(
        document.getElementById("simplebar1"),
        "dark"
      );
      const myChart2 = this.$echarts.init(
        document.getElementById("simplebar2"),
        "dark"
      );
      // 指定图表的配置项和数据
      const option1 = {
        backgroundColor: "",
        // title: {
        //   text: "撮合交易总量情况",
        //   left: "center",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {
              title: "另存为图片",
            },
          },
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: 14, // 更改坐标轴文字大小
                color: "#F8F8FF",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F8F8FF", // 更改坐标轴颜色
              },
            },
            boundaryGap: true, //坐标轴最大项最小项两边是否留空位
            type: "category",
            data: [
              "0:00",
              "1:00",
              "2:00",
              "3:00",
              "4:00",
              "5:00",
              "6:00",
              "7:00",
              "8:00",
              "9:00",
              "10:00",
              "11:00",
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
              "18:00",
              "19:00",
              "20:00",
              "21:00",
              "22:00",
              "23:00",
            ],
            axisTick: {
              alignWithLabel: true, //保证刻度线和标签对齐
            },
          },
        ],
        yAxis: [
          {
            name: "千瓦时",
            type: "value",
            color: "#F8F8FF",
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 14, // 更改坐标轴文字大小
                color: "#F8F8FF",
              },
            },
            //   axisLabel:{                 //坐标轴刻度标签的相关设置
            //     formatter: function (value, index) {            //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
            //         return value+"元";
            //     },
            // },
            axisLine: {
              lineStyle: {
                color: "#F8F8FF", // 更改坐标轴颜色
              },
            },
          },
        ],
        series: [
          {
            name: "",
            data: this.state.data1,
            type: "bar",
            barWidth: "60%",
            color: "#00BFFF",
          },
        ],
      };
      // 指定图表的配置项和数据
      const option2 = {
        name: "元",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["最高成交价", "最低成交价", "平均成交价"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: [
            "0:00",
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
          ],
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "元",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "最高成交价",
            data: this.state.data2,
            type: "line",
            color: "#EE82EE",
          },
          {
            name: "最低成交价",
            data: this.state.data3,
            type: "line",
            color: "#00BFFF",
          },
          {
            name: "平均成交价",
            data: this.state.data4,
            type: "line",
            color: "#7FFFD4",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      myChart2.setOption(option2);
    },
  },
};
</script>
